<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>接口调试工具</title>

		<meta name="description" content="User login page" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<link rel="shortcut icon" href="${req.contextPath}//images/leaf.ico">
		<link rel="stylesheet" href="http://cdn.staticfile.org/todc-bootstrap/3.3.5-3.3.5/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${req.contextPath}/plugin/select2/select2.css" />
		
		<script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
		<script type="text/javascript" src='${req.contextPath}/js/common/common.js'></script>
		<script type="text/javascript" src='${req.contextPath}/js/common/md5.js'></script>
		<script type="text/javascript" src='${req.contextPath}/js/common/signUtils.js'></script>
		<script src="${req.contextPath}/plugin/select2/select2.js"></script>
		<script src="${req.contextPath}/js/common/formjson.js"></script>
		
		<style type="text/css">
			#http_url{
				width:100%;
			}
			#result{
				width:100%;
				min-height:100px;
			    background: #daeee4 none repeat scroll 0 0;
			    border: 1px solid #b6dfca;
			}
			#parms .name,#parms .value{
				width: 100%;
			}
			#parms textarea {
				width: 100%;
				height: 100px;
			}
			
			.select2-search-field{
				width: 100%;
			}
			.select {
			    /* width: 95%; */
			    padding: 0 10px;
			    margin: 0 5px;
			    height: 2.3em;
			    line-height: 2.3em;
			    text-align: left;
			    border: 1px solid #CCC;
			    border-radius: 5px;
			    font-size: .98em;
			}
	</style>
</head>
<script>
$(function(){
	//显示body参数
	$("#body_params").bind("click",function(){
		if($(this).is(':checked')){
			$("#params_table").show();//显示
		}else{
			$("#params_table").hide();//隐藏
		}
	});
	//显示header参数
	$("#body_header").bind("click",function(){
		if($(this).is(':checked')){
			$("#header_table").show();//显示
		}else{
			$("#header_table").hide();//隐藏
		}
	});
	//显示签名参数
	$("#body_sign").bind("click",function(){
		if($(this).is(':checked')){
			$("#sign_table").show();//显示
		}else{
			$("#sign_table").hide();//隐藏
		}
	});
	
	//测试接口
	$("#http_test").click(function(){
		//空值判断
		var url=$("#http_url").val();
		if(isBlank(url)){
			$("#result").html("url不能为空！");
			return;
		}
		//获取参数列
		var params="";
		if($("#param_end").is("#param_end:visible")){
			$(".param-name").each(function(i){
				var value=$(this).parent().parent().find(".param-value").val();
				if($(this).val()!="" && value!=""){
					params=params+"&"+$(this).val()+"="+value;
				}
			 });
			$(".text-name").each(function(i){
				if($(this).val() !=""){
					params=params+"&"+$(this).val();
				}
			 });
		}
		var method=$("#api_method").val();//请求类型
 		var signType=$("#sign_type").val();//签名类型
 		var signkey=$("#sign_key").val();//签名密钥
 		//存在
 		if($("#sign_type").is("#sign_type:visible") && signType!=""){
	 		var signstr = jointSignStr(params,signType);//签名字符串
	 		var sign = sign(signstr,signkey);//签名结果
	 		params= params+"&sign="+sign;
 		}
 		//获取header
 		var header="";
 		if($("#header_end").is("#header_end:visible")){
			$(".header-name").each(function(i){
				var value=$(this).parent().parent().find(".header-value").val();
				header=header+"&"+$(this).val()+"="+value.replace(/\=/g, "@@@");//header拼接特殊点
			});
 		}
 		
		var paramStr = joinParams(params,header,url,method);//拼装http请求对象
 		
  		$.ajax({  //跨越请求由后台完成
		   type: "POST",
		   url: WEBROOT + "/apidoc/doc/http.do",
		   data: paramStr,
		   success: function(data){
			   var html=formatJson(data); //格式化JSON
				$("#result").html(html);
		   },
		   error:function (XMLHttpRequest, textStatus, errorThrown) {
			    // 通常 textStatus 和 errorThrown 之中
			    // 只有一个会包含信息
			    var html=formatJson(XMLHttpRequest); //格式化JSON
				$("#result").html(html);
			}
		});
	});
	//body参数事件
	$("#add_param").click(function(){
		$("#param_end").parent().prepend(
			"<tr>"
			+"<td><input class='param-name form-control' type='text' title='参数名称' alt='参数名称' maxlength='100' /></td>"
			+"<td><input class='param-value form-control' style='width:80%;float:left;' type='text' title='参数数值' alt='参数数值' maxlength='5000' />"
			+"<button class='btn btn-danger rem-param' style='float:right;margin-right:10px;' type='button'>删除参数</button></td></tr>"
		);
    	//绑定删除事件
   		$(".rem-param").click(rem_param);
	});
	//Raw传递参数s
	$("#raw_param").click(function(){
		$("#param_end").parent().prepend(
			"<tr>"
			+"<td colspan='2'>"
			+"<textarea rows='' cols='' class='text-name form-control' style='width:80%;float:left;' placeholder ='id=123&token=123456' ></textarea>"
			+"<button class='btn btn-danger rem-param' style='float:right;margin-right:10px;' type='button'>删除参数</button></td></tr>"
		);
    	//绑定删除事件
   		$(".rem-param").click(rem_param);
	});
	
	//添加header
	$("#add_header").click(function(){
		$("#header_end").parent().prepend(
			"<tr>"
			+"<td><input class='header-name form-control' type='text' title='header名称' alt='header名称' maxlength='100'></td>"
			+"<td><input class='header-value form-control' style='width:80%;float:left;' type='text' title='header值' alt='header值' maxlength='5000'>"
			+"<button class='btn btn-danger rem-param' style='float:right;margin-right:10px;' type='button'>删除参数</button></td></tr>"
		);
		//绑定删除事件
   		$(".rem-param").click(rem_param);
	});
	
	//删除参数
	function rem_param(){
		$(this).parent().parent().remove();
	}
	
	/**
	 * 拼接请求参数
	 */
	function joinParams(params,header,url,method){
		var result="";
		result = result + "&url="+url+"&method=" +method;
		if(params!=""){
			result = result +joinParamInsert(params,"params");
		}else{
			result = result +"&p=true";
		}
		if(header!=""){
			result = result +joinParamInsert(header,"header");
		}else{
			result = result +"&h=true";
		}
		return result;
	}
	/**
	 *	拼接参数，插入指定参数名前缀
	 */
	function joinParamInsert(params,paramName){
		var result="";
		var strs= params.split("&"); //字符分割 
		for (i=0;i<strs.length;i++){
			if(!isBlank(strs[i])){
				var map=strs[i].split("=");
				result = result +"&"+paramName+"."+map[0]+"="+map[1];
			}
		}
		return result;
	}
});
</script>
<body>
	<form style="border: thin solid #A4AA04;padding:20px 20px;" class='form-horizontal'> 
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right">
				<select id="api_method" class="select">
					<option value="GET">GET</option>
					<option value="POST" selected="selected" >POST</option>
					<option value="PUT">PUT</option>
					<option value="PATCH">PATCH</option>
					<option value="DELETE">DELETE</option>
					<option value="COPY">COPY</option>
					<option value="HEAD">HEAD</option>
					<option value="OPTIONS">OPTIONS</option>
					<option value="LINK">LINK</option>
					<option value="UNLINK">UNLINK</option>
					<option value="PURGE">PURGE</option>
				</select>
			</label>
			<div class="col-sm-6">
				<input type="text" id="http_url" class="form-control" title="URL" alt="接口URL" value="" placeholder ="http://" />
			</div>
			<div class="col-sm-2">
				<button class='btn btn-success' id="http_test" type="button">测试HTTP接口</button>
			</div>			
		</div>
		
		<div class="form-group">
			<div class="col-sm-12">
				<label class="checkbox-inline">
					<input type="checkbox" id="body_params" checked="checked">body参数&emsp;
				</label>
				<label class="checkbox-inline">
					<input type="checkbox" id="body_header">header属性&emsp;
				</label>
				<label class="checkbox-inline">
					<input type="checkbox" id="body_sign" >签名
				</label>
			</div>
		</div>
		
		<table id="params_table" class="table table-bordered">
			<thead>
				<tr><th width="35%">Body参数名称</th><th>Body参数值</th></tr>
			</thead>
			<tbody>
				<tr id="param_end">
					<td colspan="2">
						<button class='btn btn-primary' id="add_param" type="button">添加参数</button>
						<button class='btn btn-primary' id="raw_param" type="button">RAW批量添加</button>
					</td>
				</tr>
			</tbody>
		</table>
		
		<table id="header_table" class="table table-bordered" style="display:none;" >
			<thead>
				<tr><th width="35%">header参数名称</th><th>header参数值</th></tr>
			</thead>
			<tbody>
				<tr id="header_end">
					<td colspan="2">
						<button class='btn btn-primary' id="add_header" type="button">添加header</button>
					</td>
				</tr>
			</tbody>
		</table>
		
		<table id="sign_table" class="table table-bordered" style="display:none;">
			<thead>
				<tr><th width="35%">sign类型</th><th>签名密钥</th></tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<select id="sign_type" class="select">
							<option value="" selected="selected" ></option>
							<option value="sian_a">k=v&k=v&key=密钥</option>
							<option value="sian_b">v+v+密钥</option>
						</select>
					</td>
					<td>
						<input type="text" id="sign_key" class='form-control' placeholder ="无签名可忽略" />
					</td>
				</tr>
			</tbody>
		</table>

		<div class="form-group">
			<div class="col-sm-12">
				result：<br/>
				<pre id="result">
				
				</pre>
			</div>
		</div>
	</form>
</body>
</html>